<template>
  <div class="one_act_modify-container">
    <breadcrumb style></breadcrumb>
    <div class="content">
      <el-main>
        <el-collapse v-model="activeName">
          <el-collapse-item title="拼团活动名称" name="1">
            <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="活动名称">
                <el-input v-model="form.name"></el-input>
             </el-form-item>
                <el-form-item label="拼团团号:">
                <span>{{id}}</span>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="拼团商品定制" name="2">
            <el-form label-width="80px" class="goods_select">
              <el-form-item label="目标商品">
                <div class="goods">
                  <img :src="form.goodsA.picture" alt />
                  <div class="goods_msg" v-if="form.goodsA.picture">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="form.goodsA.name"
                      placement="bottom"
                    >
                      <p class="ellipsis">{{form.goodsA.name}}</p>
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="'原价:' + form.goodsA.price + '元'"
                      placement="bottom"
                    >
                      <p class="ellipsis">原价: {{form.goodsA.price + '元'}}</p>
                    </el-tooltip>
                  </div>
                </div>
                <!-- <span @click="select_goods(1)">点击选择</span> -->
              </el-form-item>
              <el-form-item label="失败商品" style="width: 360px;">
                <div class="goods">
                  <img :src="form.goodsB.picture" alt />
                  <div class="goods_msg" v-if="form.goodsB.picture">
                    <p class="ellipsis" style="color:red">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="form.goodsB.name"
                        placement="bottom"
                      >
                        <span>{{form.goodsB.name}}</span>
                      </el-tooltip>
                    </p>
                    <p class="ellipsis">原价: {{form.goodsB.price + '元'}}</p>
                  </div>
                </div>
                <!-- <span @click="select_goods(2)">点击选择</span> -->
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="拼团价格/人数制定" name="3">
            <el-form ref="form" :model="form" label-width="120px" class="assemble">
              <el-form-item label="拼团价格">
                <el-input v-model="form.price" @change="handles"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="每人最多购买次数" style="margin-left: 20px;">
                <el-input v-model="form.maxBuy" readonly="true"></el-input>
                <span>次</span>
              </el-form-item>
              <el-form-item label="可购买总次数">
                <el-input v-model="form.person" readonly="true"></el-input>
                <span>次</span>
              </el-form-item>
              <el-form-item label>
                <!-- <el-input></el-input> -->
              </el-form-item>

              <el-form-item label="拼团超时时间">
                <el-input v-model="form.overTime"></el-input>
                <span>分钟</span>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="晒单奖励" name="4">
            <div
              class="reward_goods"
              v-for="(item,index) in form.rewardList"
              :key="index"
              style="display: flex"
            >
              <el-form label-width="90px" class="assemble" style="width: 280px;">
                <el-form-item label="点赞数量" style="width: 265px;">
                  <el-input v-model="item.count"></el-input>&nbsp;
                  <span>个</span>
                </el-form-item>
              </el-form>
              <el-form class="goods_select" :model="form" label-width="50px">
                <el-form-item label="送商品" style="width: 310px;">
                  <div class="goods">
                    <img :src="item.picture" alt v-show="item.picture" />
                    <div class="goods_msg" v-show="item.picture">
                      <p class="ellipsis">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.goodsName"
                          placement="bottom"
                        >
                          <span>{{item.goodsName}}</span>
                        </el-tooltip>
                      </p>
                      <p class="ellipsis">原价{{item.goodsPrice + '元'}}</p>
                    </div>
                  </div>
                  <!-- <span @click="select_goods(3,item.id)">点击选择</span> -->
                </el-form-item>
                <span>
                  <i class="el-tag__close el-icon-close" @click="delete_reward(item.id)"></i>
                </span>
              </el-form>
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="width: 65px;height: 30px;padding:0;"
              @click="add_reward"
            >添加</el-button>
          </el-collapse-item>
        </el-collapse>
        <el-footer>
          <el-button type="primary" @click="update_activity">确 定</el-button>
          <el-button style="color: #409eff" @click="$router.go(-1)">取 消</el-button>
        </el-footer>
      </el-main>
    </div>
  </div>
</template>


<script>
import breadcrumb from "../../components/breadcrumb";
import { mapActions } from "vuex";
import { Drying } from "../../api/getData";
export default {
  components: { breadcrumb },
  data() {
    return {
      activeName: ["1", "2", "3", "4", "5", "6", "7"],
      id: this.$route.query.id,
      form: {
        name: "",
        price: "",
        status: "1",
        maxBuy: "", //最大购买金额
        person: "", //开团人数
        overTime: "", //开团超时时间,单位：分
        goodsA: { picture: "", name: "", price: "", id: "" },
        goodsB: { picture: "", name: "", price: "", id: "" },
        flag: 1, //flag 1代表的是目标商品  2代表的是失败商品
        rewardList: [],
        rewardPosition: 0, //  记录位置id
        startTime: "", //活动开始时间
        endTime: "" //活动结束时间
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {
    this.sava_goods_type();
    let msg = localStorage.getItem("msg") || "";

    if (msg) {
      localStorage.removeItem("msg");
      this.form = JSON.parse(msg);
      localStorage.removeItem("goods");
    } else {
      this.get_detail();
      this.get_share();
    }
    let id = localStorage.getItem("id") || "";

    if (id) {
      localStorage.removeItem("id");
      this.goodsDetail(this.form.flag, id);
    }
  },
  methods: {
    ...mapActions(["sava_goods_type"]),
    updateDate: function(val) {
      this.value1 = val;
    },

    get_detail() {
      this.$axios
        .post("/web_one_promotion/get_promotion", "id=" + this.id)
        .then(result => {
          if (result.data.status == 0) {
            let data = result.data.data;
            this.form.name = data.name;
            this.form.status = data.status;
            this.form.price = data.price;
            // this.form.maxBuy = data.maxBuy;
            // this.form.person = data.person;
            this.form.overTime = data.overTime;
            this.form.goodsA = data.goodsADetail;
            this.form.goodsB = data.goodsBDetail;
            this.form.person = Math.ceil(
              this.form.goodsA.price / this.form.price
            );
            this.form.maxBuy = Math.floor(this.form.person / 2);
          }
        });
    },
    get_share() {
      var data = "promotionId=" + this.id;
      this.$axios.post("/web_one_promotion/get_share", data).then(res => {
        if (res.data.status == 0 && res.data.data.length != 0) {
          res.data.data.forEach(item => {
            this.form.rewardList.push({
              count: item.helpNumber,
              picture: item.picture,
              goodsName: item.name,
              goodsPrice: item.price,
              id: item.id,
              goodsId: item.goodsId
            });
          });
        }
      });
    },
    select_goods(flag, id) {
      this.form.flag = flag;
      if (flag == 3) {
        this.form.rewardPosition = id;
        localStorage.setItem("msg", JSON.stringify(this.form));

        return this.$router.push("/selectGoods");
      }
      localStorage.setItem("msg", JSON.stringify(this.form));

      this.$router.push("/onePromotion_selectGoods?type=" + "4");
    },
    goodsDetail(flag, id) {
      this.$axios.post("web_goods/get_one", "id=" + id).then(result => {
        if (result.data.status == 0) {
          let data = result.data.data.goods;
          if (flag == 1) {
            this.form.goodsA = {
              picture: data.pictureUrl,
              name: data.name,
              price: data.price,
              id: data.id
            };
          } else if (flag == 2) {
            this.form.goodsB = {
              picture: data.pictureUrl,
              name: data.name,
              price: data.price,
              id: data.id
            };
          } else if (this.form.flag == 3) {
            this.form.rewardList.forEach(item => {
              if (item.id == this.form.rewardPosition) {
                item.goodsName = data.name;
                item.goodsPrice = data.price;
                item.picture = data.pictureUrl;
                item.goodsId = data.id;
              }
            });
          }
        }
      });
    },
    handles(e) {
      this.form.person = Math.ceil(this.form.goodsA.price / this.form.price);
      this.form.maxBuy = Math.floor(this.form.person / 2);
    },
    update_activity() {
      if (!this.form.name) {
        return this.$message({
          type: "warning",
          message: "活动名称不能为空"
        });
      }
      if (!this.form.goodsA.id) {
        return this.message({
          type: "warning",
          message: "目标商品不能为空"
        });
      }
      if (!this.form.goodsB.id) {
        return this.$message({
          type: "warning",
          message: "失败商品不能为空"
        });
      }
      if (!this.form.price) {
        return this.$message({
          type: "warning",
          message: "商品价格不能为空"
        });
      }
      if (!this.form.maxBuy) {
        return this.$message({
          type: "warning",
          message: "商品最大购买次数不能为空"
        });
      }
      if (!this.form.person) {
        return this.$message({
          type: "warning",
          message: "活动开团人数不能为空"
        });
      }
      // if(!this.form.overTime){
      //   return this.$message({
      //     type: 'warning',
      //     message: '拼团超时时间不能为空'
      //   })
      // }
      let data =
        "id=" +
        this.id +
        "&name=" +
        this.form.name +
        "&price=" +
        this.form.price +
        "&status=" +
        "1" +
        "&goodsA=" +
        this.form.goodsA.id +
        "&goodsB=" +
        this.form.goodsB.id +
        "&maxBuy=" +
        this.form.maxBuy +
        "&overTime=" +
        this.form.overTime +
        "&person=" +
        this.form.person;
      //console.log(data, "777");

      this.$axios
        .post("/web_one_promotion/modify_promotion", data)
        .then(result => {
          if (result.data.status == 0) {
            if (result.data.data == 1) {
              var data1 = [];

              this.form.rewardList.forEach(item => {
                data1.push({
                  goodsId: item.goodsId,
                  helpNumber: item.count
                });
              });
              //{ shares,promotionId:this.id }
              //{headers:'Content-Type: application/x-www-form-urlencoded'}
              var shares = data1;
              var promotionId = this.id;
              let data = { shares, promotionId };

              //  let data='shares='+shares+'promotionId='+this.id

              this.$axios
                .post("/web_one_promotion/modify_share", {
                  shares: data1,
                  promotinId: this.id
                })
                .then(res => {
                  if (res.data.status == 0) {
                    if (res.data.data == 1) {
                      this.$router.push("/onePromotion_activitySettings");
                    } else {
                      return this.$message({
                        type: "warning",
                        message: "添加失败"
                      });
                    }
                  }
                });
            } else {
              return this.$message({
                type: "warning",
                message: "修改失败"
              });
            }
          }
        });
    },
    //   添加晒单奖励
    add_reward() {
      this.form.rewardList.push({
        count: "",
        picture: "",
        goodsName: "",
        goodsPrice: "",
        id: this.form.rewardList.length
          ? this.form.rewardList[this.form.rewardList.length - 1]["id"] + 1
          : 1,
        goodsId: ""
      });
    },
    //   删除晒单奖励
    delete_reward(index) {
      this.form.rewardList = this.form.rewardList.filter(
        item => item.id != index
      );
    }
  },
  computed: {
    goodsType() {
      let goodsType = this.$store.state.goodsType;
      return goodsType;
    }
  }
};
</script>



<style lang="less">
.one_act_modify-container {
  display: flex;
  flex-flow: column;
  height: 100%;
  .el-tag__close.el-icon-close:hover {
    background-color: #409eff;
    color: #fff;
    border-radius: 50%;
  }
  .content {
    width: 100%;
    flex: 1;
    padding: 30px;
    background-color: #eff3f6;
    box-sizing: border-box;
    .el-main {
      background-color: #fff;
      height: 100%;
      padding: 20px 40px 0;
      .el-collapse {
        border: none;
        .el-collapse-item {
          margin-bottom: 10px;
          .el-collapse-item__header {
            height: 40px;
            color: #409eff;
            border-bottom: 1px solid #e4e5e7;
            .el-collapse-item__arrow {
              margin: 0;
              margin-left: 10px;
            }
          }
          .el-collapse-item__wrap {
            margin-top: 20px;
            border: none;
            .el-collapse-item__content {
              padding: 0;
              padding-left: 15px;
              .el-form {
                display: flex;

                .el-form-item {
                  margin: 0;
                  width: 250px;
                  .el-form-item__label {
                    height: 30px;
                    line-height: 30px;
                    text-align: left;
                    color: #000;
                    font-weight: 600;
                    padding: 0;
                  }
                  .el-form-item__content {
                    line-height: 30px;
                    .el-input {
                      .el-input__inner {
                        height: 30px;
                        line-height: 30px;
                      }
                    }
                  }
                }
              }
              .goods_select {
                display: flex;
                flex-wrap: wrap;
                .el-form-item {
                  width: 375px;
                  margin-right: 38px;
                  margin-bottom: 15px;
                  .el-form-item__content {
                    display: flex;
                    justify-content: space-between;
                    .goods {
                      width: 180px;
                      height: 70px;
                      padding: 5px;
                      box-sizing: border-box;
                      border: 1px solid #bbbfc2;
                      display: flex;
                      justify-content: space-around;
                      img {
                        width: 70px;
                        height: 60px;
                      }
                      .goods_msg {
                        width: 95px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        p {
                          width: 100%;
                        }
                      }
                    }
                    span {
                      cursor: pointer;
                      height: 20px;
                      color: #0066ff;
                    }
                  }
                }
              }
              .assemble {
                flex-wrap: wrap;
                .el-form-item {
                  width: 320px;
                  margin-right: 40px;
                  margin-bottom: 20px;
                  .el-form-item__content {
                    display: flex;
                    justify-content: space-between;
                    .el-input {
                      width: 150px;
                    }
                    .el-input__icon {
                      line-height: 100%;
                    }
                  }
                  span {
                    font-weight: 600;
                  }
                }
              }
              .time {
                .el-form-item {
                  width: 330px;
                }
              }
            }
          }
        }
      }
    }
    .el-footer {
      margin-top: 70px;
      text-align: center;
      > button {
        height: 30px !important;
        line-height: 30px;
        padding: 0;
        width: 60px;
        margin: 0 70px;
        // box-sizing: content-box;
      }
    }
  }
}
</style>
